<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" :scroll-x="true" :style="scrollStyle">
				<template v-for="(tab, index) in tabBars">
					<view class="swiper-tab-list" :key="index" :class="{'active': tabIndex===index}" @tap="tabtap(index)" :style="scrollItemStyle">
						{{tab.name}} {{tab.num ? tab.num : ''}}
						<view class="swiper-tab-line"></view>
					</view>
				</template>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBars: {
				type: Array
			},
			tabIndex: {
				type: Number
			},
			scrollStyle: {
				type: String,
				default: ''
			},
			scrollItemStyle: {
				type: String,
				default: ''
			},
		},
		methods: {
			tabtap(index) { // 顶部滑块点击事件
				// this.tabIndex = index
				this.$emit('changeIndex', index)
			}
		}
	}
</script>

<style scoped>
	.uni-swiper-tab {
		border-bottom: 1rpx solid #EEEEEE;;
	}
	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
	}
	.uni-tab-bar .active {
		color: #343434;
	}
	.active .swiper-tab-line {
		border-bottom: 6rpx solid #FEDE33;
		width: 70rpx;
		margin: auto;
		border-top: 6rpx solid #FEDE33;
		border-radius: 20rpx;
	}
</style>
